<template>
  <div class="container" ref="draggable">
    <el-table
      v-bind="attrs"
      :data="tableData"
      stripe
      style="width: 100%; margin-top: 10px; height: 100%; width: 100%"
      class="el-table"
      @expand-change="expandChange"
      ref="tabRef"
      id="myTable"
    >
      <el-table-column
        v-if="props.isSelection"
        type="selection"
      ></el-table-column>
      <!--索引-->
      <el-table-column
        v-if="props.isIndex"
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        width="100px"
        align="center"
        label="展开/折叠"
        type="expand"
        v-if="isCallapse"
      >
        <template #default>
          <tabel
            ref="tabelChild"
            :column="chidleColumn"
            :showClass="false"
            :isCallapse="false"
            :title="childTile"
            @changeCurrent="changeCurrent"
          ></tabel>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in props.column"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || 'auto'"
        :align="item.aligin || 'center'"
        :fixed="item.fixed"
        :formatter="item.formatter || (() => '')"
      >
        <template #default="scope" v-if="!item.formatter">
          <slot v-if="item.slot" :name="item.prop" :scope="scope"></slot>
          <div v-else-if="item.format || item.btns">
            <span
              v-html="
                item.format &&
                item.format(scope.row[item.prop], scope.row, scope.$index)
              "
              @click="handleEvent(item.event, scope.row)"
            ></span>
            <span v-for="(btn, id) in item.btns" :key="id">
              <el-button
                v-if="btn.show ? btn.show(scope.row) : true"
                :type="btn.type || 'warning'"
                :text="item.text || true"
                :plain="btn.plain || false"
                style="margin: 4px 4px;
                height: 3vh;
                border: 1px solid;
                padding: 1.5vh;"
                v-html="btn.format ? btn.format(scope.row) : btn.title"
                :disabled="btn.disabled && btn.disabled(scope.row)"
                @click="handleEvent(btn.event, scope.row)"
                :icon="item.icon || ''"
              ></el-button>
            </span>
          </div>
          <div v-else>
            <el-button
              :type="btn.type || 'warning'"
              :plain="btn.plain || false"
              style="margin: 4px 4px;
                height: 3vh;
                border: 1px solid;
                padding: 1.5vh;"
              v-if="item.link"
              @click="handleEvent(item.link, scope.row)"
              >{{ scope.row[item.prop] }}
            </el-button>
            <el-input
              v-else-if="item.input"
              v-model="scope.row[item.prop]"
            ></el-input>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-if="props.isPagination">
        <div>
          <span style="font-size: 16px">显示{{ pager.pageSize }}条消息 </span>
          <el-input-number
              v-model:model-value="pager.pageNum"
              :min="1"
              :max="100"
              controls-position="right">
          </el-input-number>
          <span style="font-size: 16px">
            共 <span style="color: blue">{{ pager.total }}</span> 条消息
          </span>
      </div>

      <el-pagination
        layout="prev, pager, next"
        :total="pager.total"
        :page-size="pager.pageSize"
        v-model:current-page="pager.pageNum"
        @current-change="handleCurrentChange"
      >
      </el-pagination>

<!--      <el-pagination-->
<!--        v-model:currentPage="pager.pageNum"-->
<!--        v-model:page-size="pager.pageSize"-->
<!--        :page-sizes="[5, 10, 20, 30, 50]"-->
<!--        :small="false"-->
<!--        background-->
<!--        layout="sizes,slot, prev, pager, next, jumper"-->
<!--        :total="pager.total"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--      >-->
<!--        <template #default>-->
<!--          <div>-->
<!--            共<span class="text">{{ pager.total }}</span-->
<!--            >条消息-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-pagination>-->
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref, nextTick, watch, reactive, onMounted, useAttrs } from "vue";
import tabel from "./index.vue";

const attrs = useAttrs();
const tabRef = ref(null);
const tabelChild = ref<any>(null);

// 使用对象形式定义 props 和默认值
const props = defineProps({
  column: Array,
  showClass: String,
  isCallapse: Boolean,
  title: String,
  childTile: String,
  chidleColumn: Array,
  api: Function,
  where: Object,
  isIndex: Boolean,
  isSelection: Boolean,
  isPagination: {
    type: Boolean,
    default: true,
  },
});
const title = props.title || "查询结果列表";
let emits = defineEmits(["changeCurrent", "getChildData", "goChild"]);
let tableData = ref<any[]>([]);
const pager = ref({
  pageSize: 5,
  total: 0,
  pageNum: 1,
});

watch(pager.value,(newVal, oldVal) => {

  handleCurrentChange(newVal.pageNum);

})

const getData = async (params = {}) => {
  const { total, ...pagerParams } = pager.value;
  const res = await props.api({ ...props.where, ...params, ...pagerParams });
  nextTick(() => {
    const { rows, total, size, current } = res;
    tableData.value = rows;
    pager.value.total = total;
    // pager.value.pageSize = size;
    // pager.value.pageNum = current;
  });
};

const handleCurrentChange = (value: number) => {
  tableData.value.length == 0 || emits("changeCurrent", value);
  pager.value.pageNum = value;
  console.log(pager.value);
  getData();
};
const handleSizeChange = (value: number) => {
  tableData.value.length == 0 || emits("changeCurrent", value);
  pager.value.pageSize = value;
  getData();
};
const handleEvent = (event: any, row: any[]) => {
  console.log(event, row);
  emits(event, row);
};
const currentRow = ref({});
const expandChange = (row: any, expande: any) => {
  nextTick(() => {
    currentRow.value = row;
    emits("getChildData", row, tabelChild.value.getData);
  });
};
const changeCurrent = (data: any) => {
  emits("getChildData", currentRow.value, tabelChild.value.getData, data, 5);
};
const clear = () => {
  tableData.value = [];
  pager.value.pageNum = 1;
  pager.value.total = 0;
};
const getSelectable = () => tabRef.value.getSelectionRows();
watch(
  () => props.where,
  (n, o) => {
    if (JSON.stringify(n) === "{}") {
      pager.value.pageNum = 1;
      pager.value.pageSize = 10;
    }
    getData();
  }
);
onMounted(async () => {
  getData();
});
defineExpose({ getData, clear, getSelectable });
</script>
  <style lang="scss" scoped >
.container {
  height: auto;
  width: 100%;
  border-radius: 5px;
}


.pagination {
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 30px;
}

.pagination :deep(.el-input-number) {
  width: 70px;
}

.pagination :deep(.el-input__inner) {
  width: 10px;
}

.pagination > .btn-prev {
  margin-left: 100px;
}

.pagination :deep(.el-pagination){
  --el-pagination-bg-color: rgba(255, 255, 255, 0);
  --el-pagination-button-disabled-bg-color:rgba(255,255,255,0);
  --el-pagination-font-size:16px;
}

.pagination :deep(li):focus{
  background-color: #2A68F2;
  color: #fff;
}

:deep(.el-table--default .el-table__cell) {
  padding: 0px;
}
.text {
  color: #409eff;
  margin: 0 3px;
}
</style>